/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-05-09 16:50:02
 * @LastEditTime : 2023-07-19 09:13:07
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\Common\Template\QualityScore.jsx
 * @Description  :
 */
import './Scss/QualityScore.scss'
import dayjs from 'dayjs'
import { Pie } from '@ant-design/plots'
import { useState, useEffect } from 'react'
import { useRequest, useBoolean } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { LargeScreenTablesModal } from '../LargeScreen/LargeScreenModal'

import { WebTemplateUrl } from './configuration'

export const QualityScore001 = () => {
    const [OneData, setOneData] = useState([])
    const [TwoData, setTwoData] = useState()
    const [ThrData, setThrData] = useState([])
    const [ChartsStateOne, setChartsStateOne] = useState()
    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [LabList, setLabList] = useState()

    useEffect(() => {
        const cfgOne = {
            appendPadding: 10,
            autoFit: false,
            width: 150,
            height: 150,
            data: OneData,
            angleField: 'value',
            colorField: 'type',
            radius: 1,
            legend: false,
            color: ['#62D4E6', '#77C3FF', '#FEB891'],
            pieStyle: { stroke: 'block' },
            label: null,
            interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        }
        setChartsStateOne(cfgOne)
    }, [ThrData, OneData])

    const { runAsync: getJSZXQualityStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { scores, labList, nonQualifiedPercent, qualifiedPercent, nonQualifiedCount, totalCount } = res
            setTwoData({ nonQualifiedCount, totalCount })
            const lab_self = scores.find(v => v.labCode === 'lab_self').score || 100
            const lab_sampling = scores.find(v => v.labCode === 'lab_sampling').score || 100
            const lab_dsf = scores.find(v => v.labCode === 'lab_dsf').score || 100
            setLabList(labList)
            setOneData([
                { type: '自检评分', value: lab_self, color: '#62D4E6' },
                { type: '抽检评分', value: lab_sampling, color: '#77C3FF' },
                { type: '第三方评分', value: lab_dsf, color: '#FEB891' },
            ])
            setThrData([
                { type: '不合格', value: nonQualifiedPercent, color: '#C75212' },
                { type: '合格', value: qualifiedPercent, color: '#12C79A' },
            ])
        },
    })

    useEffect(() => {
        getJSZXQualityStat({ url: 'getJSZXQualityStat' })
    }, [getJSZXQualityStat])

    // 三级页配置参数
    const [ParameterTitle, setParameterTitle] = useState()
    const [Parameter, setParameter] = useState()
    return (
        <div className="QualityScore001">
            <div className="TitleSmall">
                <div>质量预警</div>
                <div />
            </div>
            <div className="Box">
                <div>
                    <div className="Box">
                        <div>
                            {ChartsStateOne && <Pie {...ChartsStateOne} />}
                            <div>
                                {OneData.map(({ type, value, color }, index) => (
                                    <div key={index}>
                                        <div style={{ color }}>{type}</div>
                                        <div
                                            onClick={() => {
                                                setParameter({
                                                    type: 'LargeScreeTable',
                                                    classification: 'QualityStatDetail',
                                                    other: { project: true },
                                                })
                                                setParameterTitle('质量预警列表')
                                                setTrue()
                                            }}
                                        >
                                            {value}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                    <div
                        onClick={() => {
                            if (TwoData?.nonQualifiedCount === 0) return false
                            setParameter()
                            setParameterTitle('试验数据列表')
                            setParameter({
                                type: 'TestDetailed',
                                other: {
                                    className: 'HeYiTestDetailed',
                                    result: 1,
                                    LabList,
                                    StateTime: `${dayjs().format('YYYY-MM')}-01`,
                                },
                            })
                            setTrue()
                        }}
                    >
                        <img src={WebTemplateUrl + 'Lab警告.png'} alt="" />
                        <div>告警信息</div>
                        <div>{TwoData?.nonQualifiedCount}</div>
                    </div>
                </div>
            </div>
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title={ParameterTitle}
                    parameter={Parameter}
                />
            )}
        </div>
    )
}
